import React, { useState } from 'react';
import HistoryList from './components/HistoryList/HistoryList';
import ChatContent from './components/ChatContent/ChatContent';
import DataTable from './components/DataTable/DataTable';
import './KimiChat.scss';

export interface ChatMessage {
    id: string;
    content: string;
    timestamp: Date;
    type: 'user' | 'assistant';
}

export interface ChatSession {
    id: string;
    title: string;
    messages: ChatMessage[];
    createdAt: Date;
    updatedAt: Date;
}

export interface TableData {
    id: string;
    name: string;
    value: number;
    category: string;
    status: string;
    date: string;
}

const KimiChat: React.FC = () => {
    const [sessions, setSessions] = useState<ChatSession[]>([]);
    const [currentSessionId, setCurrentSessionId] = useState<string | null>(null);
    const [tableData, setTableData] = useState<TableData[]>([]);

    const currentSession = sessions.find(session => session.id === currentSessionId);

    const handleCreateSession = () => {
        const newSession: ChatSession = {
            id: Date.now().toString(),
            title: `新对话 ${sessions.length + 1}`,
            messages: [],
            createdAt: new Date(),
            updatedAt: new Date()
        };
        setSessions(prev => [newSession, ...prev]);
        setCurrentSessionId(newSession.id);
    };

    const handleDeleteSession = (sessionId: string) => {
        setSessions(prev => prev.filter(session => session.id !== sessionId));
        if (currentSessionId === sessionId) {
            setCurrentSessionId(null);
        }
    };

    const handleSelectSession = (sessionId: string) => {
        setCurrentSessionId(sessionId);
    };

    const handleSendMessage = (content: string) => {
        if (!currentSessionId) return;

        const userMessage: ChatMessage = {
            id: Date.now().toString(),
            content,
            timestamp: new Date(),
            type: 'user'
        };

        // 模拟AI回复和数据返回
        const assistantMessage: ChatMessage = {
            id: (Date.now() + 1).toString(),
            content: `我收到了您的消息："${content}"。正在为您分析数据...`,
            timestamp: new Date(),
            type: 'assistant'
        };

        // 模拟返回的表格数据
        const mockTableData: TableData[] = [
            {
                id: '1',
                name: '数据项1',
                value: Math.floor(Math.random() * 1000),
                category: '类别A',
                status: '正常',
                date: new Date().toLocaleDateString()
            },
            {
                id: '2',
                name: '数据项2',
                value: Math.floor(Math.random() * 1000),
                category: '类别B',
                status: '异常',
                date: new Date().toLocaleDateString()
            },
            {
                id: '3',
                name: '数据项3',
                value: Math.floor(Math.random() * 1000),
                category: '类别A',
                status: '正常',
                date: new Date().toLocaleDateString()
            }
        ];

        setSessions(prev => prev.map(session => {
            if (session.id === currentSessionId) {
                return {
                    ...session,
                    messages: [...session.messages, userMessage, assistantMessage],
                    updatedAt: new Date()
                };
            }
            return session;
        }));

        setTableData(mockTableData);
    };

    return (
        <div className="kimi-chat">
            <div className="kimi-chat__sidebar">
                <HistoryList
                    sessions={sessions}
                    currentSessionId={currentSessionId}
                    onCreateSession={handleCreateSession}
                    onDeleteSession={handleDeleteSession}
                    onSelectSession={handleSelectSession}
                />
            </div>
            <div className="kimi-chat__main">
                <ChatContent
                    session={currentSession}
                    onSendMessage={handleSendMessage}
                />
            </div>
            <div className="kimi-chat__data">
                <DataTable data={tableData} />
            </div>
        </div>
    );
};

export default KimiChat;